<template>
  <view>
    <view class="bs1-nr">
      <text>我的喜欢</text>
      <text>234个喜欢</text>
      <swiper display-multiple-items="5">
        <swiper-item v-for="(item, index) in tagList" :key="index">
          <text
            :class="{ 'hs1-is': Sindex == index }"
            @click="SonClick(index)"
            >{{ item }}</text
          >
        </swiper-item>
      </swiper>
    </view>
    <view class="bs1-x">
      <like_cr
        v-for="(item, index) in dataList"
        :key="index"
        :ditem="item"
      ></like_cr>
    </view>
  </view>
</template>

<script>
import like_cr from "./like_cr";
export default {
  data() {
    return {
      dataList: [
        {
          name: "虚拟人贝拉",
          studio: "戴维斯工作室",
          src: "/static/34.jpg",
          num: "4.6",
          tag: "海外",
          time: "2022/05/22",
        },
        {
          name: "阿凡达品牌",
          studio: "Vian工作室",
          src: "/static/34.jpg",
          num: "4.6",
          tag: "品牌",
          time: "2022/05/20",
        },
        {
          name: "玩偶形象",
          studio: "congry",
          src: "/static/34.jpg",
          num: "4.6",
          tag: "形象",
          time: "2022/05/18",
        },
      ],
      Sindex: 0,
      tagList: [
        "热度",
        "最新",
        "关注",
        "虚拟人",
        "卡通",
        "品牌",
        "搞笑",
        "游戏",
        "动漫",
        "漫画",
      ],
    };
  },
  components: {
    like_cr,
  },
  methods: {
    SonClick(index) {
      this.Sindex = index;
    },
  },
};
</script>

<style lang="scss">
.bs1-nr {
  padding-left: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  > text:nth-child(1) {
    font-weight: bold;
    font-family: PingFangRegular;
    font-size: 23px;
    margin-bottom: 7px;
    line-height: 31px;
    margin-top: 22px;
  }

  > text:nth-child(2) {
    font-family: PingFangRegular;
    margin-bottom: 18px;
    color: #616161;
    font-weight: bold;
  }

  uni-swiper {
    display: flex;
    height: 74px;

    uni-swiper-item {
      display: flex;
      width: auto;
      text {
        padding: 9px 14px;
        background-color: #fff;
        border-radius: 5px;
        color: #616161;
        font-size: 12px;
        position: absolute;
        box-sizing: border-box;
        line-height: 17px;
        box-shadow: 0px 22px 24px 0px rgba(53, 64, 90, 0.1);
      }
    }
  }
}

.bs1-x {
  width: 100%;
  height: 90vh;
  background: #fff;
  display: block;
}

.hs1-is {
  background: #f4b062 !important;
  color: white !important;
}
</style>
